<template>
    <div class="app-container">
      <el-row :gutter="15">
        <el-form :model="formData" :rules="rules" ref="elForm" label-width="85px">
          <el-col :span="24">
            <el-form-item label="所属栏目">
              <treeselect
                @select="changeTree"
                v-model="formData.menu_id"
                :options="menuOptions"
                :normalizer="normalizer"
                :show-count="true"
                placeholder="选择所属栏目"
              />
            </el-form-item>
          </el-col>

          <el-col :span="24">
            <el-form-item label="文章标题" prop="art_name">
              <el-input
                v-model="formData.art_name"
                placeholder="请输入文章标题"
                clearable
              />
            </el-form-item>
          </el-col>

          <el-col :span="24">
            <el-form-item label="封面图片" prop="art_face">
              <ImageUpload v-model="formData.art_face" @input="getImgUrl"></ImageUpload>
            </el-form-item>
          </el-col>

          <el-col :span="24">
            <el-form-item label="文章内容" prop="art_content">
              <vue-ueditor-wrap v-model="formData.art_content"
                                editor-id="editor"
                                :config="editorConfig"
                                :editorDependencies="['ueditor.config.js','ueditor.all.js']"
                                />
            </el-form-item>

            <el-col :span="24">
              <el-form-item>
                <el-button type="primary" @click="submitForm">确 定</el-button>
                <el-button @click="cancel">取 消</el-button>
              </el-form-item>
            </el-col>
          </el-col>

        </el-form>
      </el-row>
    </div>
</template>

<script>
    import { listMenu } from '@/api/base/menu';
    import { getArticle, addArticle, updateArticle } from '@/api/base/article';
    import Treeselect from "@riophae/vue-treeselect";
    import "@riophae/vue-treeselect/dist/vue-treeselect.css";
    export default {
        name: "articleForm",
        components: { Treeselect },
        props: ['keyValue'],
        data() {
          return{
            menuOptions: [],
            editorConfig: {
              serverUrl: process.env.VUE_APP_BASE_API + "/config",
              //前端资源
              UEDITOR_HOME_URL: '/UEditor/',
              UEDITOR_CORS_URL: '/UEditor/',
              zIndex: 99999,//设置z轴顺序值，避免工具栏下拉组件被遮挡
            },
            formData:{
              art_name: '',
              art_face: '',
              art_content: '',
              menu_id: 0,
              menu_name: ''
            },
            rules:{
              menu_name: [{ required: true, message: "栏目名称不能为空", trigger: "blur" }]
            }
          }
        },
        mounted() {
          if(this.keyValue != null) {
            getArticle(this.keyValue).then(res=>{
              this.formData = res.data;
            })
          }
          this.getAllMenu();
        },
        methods:{
            submitForm() {
              this.$refs["elForm"].validate(valid => {
                if (valid) {
                  if(this.keyValue == null) {
                    addArticle(this.formData).then(res=>{
                      this.commonMsg(res);
                    });
                  } else {
                    updateArticle(this.formData).then(res=>{
                      this.commonMsg(res);
                    });
                  }
                } else {
                  return;
                }
              });
            },
            commonMsg(res) {
              if(res.code == 200) {
                this.$message.success('操作成功!');
                this.$emit('showList');
              } else {
                this.$message.error(res.msg);
              }
            },
            changeTree(val) {
              this.formData.menu_name = val.menu_name;
            },
            getImgUrl(val) {
                this.formData.art_face = val;
            },
            // 获取所有栏目
            getAllMenu() {
              listMenu().then(res=>{
                const menu = { menu_id: 0, menu_name: '主栏目', children: [] };
                menu.children = this.handleTree(res.data, "menu_id");
                this.menuOptions.push(menu);
              });
            },
            // 取消功能
            cancel() {
              this.$emit('closeDiag');
            },
            /** 转换菜单数据结构 */
            normalizer(node) {
              if (node.children && !node.children.length) {
                delete node.children;
              }
              return {
                id: node.menu_id,
                label: node.menu_name,
                children: node.children
              };
            },
          }
    }
</script>

<style scoped>

</style>
